 <template>
 <!-- :close-on-click-modal="false"   点击遮罩不关闭弹窗 -->
  <!-- :visible="dialogFormVisible"    控制弹窗变量 -->
  <el-dialog
    :title="shou"
    :visible="dialogFormVisible"
    @close="cha"
    style="width: 50%; margin-left: 380px; margin-top: 90px"
    :close-on-click-modal="false"
  >
    <!-- label-width="80px"  控制 名称和表单不在一行问题 -->
    <el-form :model="formData" :rules="rules" ref="doudi">
      <el-form-item label="所属学科" label-width="80px" prop="subjectID">
        <el-select
          placeholder="请选择"
          v-model=" formData.subjectID"
          @focus="xinzeng"

        >
          <el-option
            v-for="item in items"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
          <!-- <el-option label="区域二" value="beijing"></el-option> -->
        </el-select>
      </el-form-item>

      <el-form-item
        label="目录名称"
        label-width="80px"
        style="width: 87%"
        prop="directoryName"
      >
        <el-input v-model="formData.directoryName"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="tianjia"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/directorys'
import { simple as subjectSimple } from '@/api/hmmm/subjects'
// import { xuanran } from '@/module-hmmm/pages/directorys.vue'
export default {

  data () {
    return {
      // 新增from数据
      formData: {
        subjectID: '', // 学科id
        directoryName: '', // 目录名称
        id: ''
      },

      forma: {
        directoryName: '', // 目录名称
        subjectName: '',
        id: '',
        creator: '',
        addDate: '',
        totals: '',
        state: ''
      },

      // 表单校验
      rules: {
        subjectID: [
          {
            required: true,
            message: '请输入学科',
            trigger: ['blur', 'change']
          }
        ],
        directoryName: [
          {
            required: true,
            message: '请输入目录名称',
            trigger: ['blur', 'change']
          }
        ]
      },

      items: [],

      subjectName: ''
    }
  },
  // 父传子
  props: {
    dialogFormVisible: {
      default: false
    }
  },
  computed: {
    shou () {
      return this.formData.id ? '修改目录' : '新增目录'
    }
  },
  methods: {
    // 修改回显
    async huixian (row) {
      this.xinzeng()
      const { data } = await detail(row)
      this.formData = data
      // console.log(this.formData)
    },
    // 添加
    tianjia () {
      this.$refs.doudi.validate(async flag => {
        if (!flag) return
        if (this.formData.id) {
          await update(this.formData)
          this.$message.success('修改成功')
        } else {
          await add(this.formData)
          this.$message.success('添加成功')
        }

        this.cha()
        this.$parent.xuanran()
      })
    },
    // 渲染列表
    async xinzeng () {
      // this.tagPage.subjectID = this.subject.id || null
      const { data } = await subjectSimple()
      this.items = data
      // console.log(this.items)
    },
    // 点击关闭 X
    cha () {
      this.$emit('update:dialogFormVisible', false)
      this.$refs.doudi.resetFields()
      this.formData.id = ''
    }
  }
}
</script>

<style scoped lang='less'></style>
